<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>电子相册系统</title>
<!-- 源需求文档（本地）: /mnt/data/电子相册系统面向对象需求分析 (1).docx -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>

<!-- 登录页 -->
<div id="loginView" class="page">
  <div class="auth-center" role="main">
    <h1>电子相册</h1>
    <p class="muted">ヾ(๑╹◡╹)ﾉ"</p>

    <div class="field"><label class="muted">用户id</label><input id="loginUser" placeholder="示例: demo" /></div>
    <div class="field" style="display:none;"><label class="muted">用户名</label><input id="loginName" placeholder="示例: 演示用户" /></div>
    <div class="field"><label class="muted">密码</label><input id="loginPwd" type="password" placeholder="示例: 1234" /></div>
    <div class="field" style="display:none;"><label class="muted">确认密码</label><input id="loginPwdConfirm" type="password" placeholder="请再次输入密码" /></div>

    <div style="display:flex;gap:10px;margin-top:12px;">
      <button class="btn" id="loginBtn" onclick="checkLogin()">登录</button>
      <button class="btn" id="registerBtn" onclick="register()" style="display:none;">确认注册</button>
      <button class="btn" onclick="showregister()" id="showRegisterBtn">注册新用户</button>
      <button class="btn" id="backLoginBtn" onclick="backLogin()" style="display:none;">返回登录</button>
      <button class="btn" onclick="showView('adminLoginView')" style="margin-left:auto">管理员</button>
    </div>
  </div>
</div>


<script>
  // 隐藏注册相关输入框
  window.onload = function() {
  }
    function checkLogin() {
      const userid = document.getElementById('loginUser').value;
      const password = document.getElementById('loginPwd').value;
      fetch('/logincheck', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ userid, password })
      })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          alert('登录成功！');
          fetch("getuserinfo")
          .then(res => res.json())
          .then(userdata => {
            if( userdata.role === '管理员' ) {
              window.location.href = '/admin';
            } else {
              window.location.href = '/main';
            }
          });
        } else {
          alert(data.message);
        }
      });
    }
    function showregister() {
      document.getElementById('loginUser').parentElement.style.display = 'none';
      document.getElementById('loginName').parentElement.style.display = 'block';
      document.getElementById('loginPwdConfirm').parentElement.style.display = 'block';
      document.getElementById('registerBtn').style.display = 'block';
      document.getElementById('backLoginBtn').style.display = 'block';
      document.getElementById('loginBtn').style.display = 'none';
      document.getElementById('showRegisterBtn').style.display = 'none';
    }

    function backLogin() {
      document.getElementById('loginUser').parentElement.style.display = 'block';
      document.getElementById('loginName').parentElement.style.display = 'none';
      document.getElementById('loginPwdConfirm').parentElement.style.display = 'none';
      document.getElementById('registerBtn').style.display = 'none';
      document.getElementById('backLoginBtn').style.display = 'none';
      document.getElementById('loginBtn').style.display = 'block';
      document.getElementById('showRegisterBtn').style.display = 'block';
    }
    function register() {
      const username = document.getElementById('loginName').value;
      const password = document.getElementById('loginPwd').value;
      const passwordConfirm = document.getElementById('loginPwdConfirm').value;
      if (password !== passwordConfirm) {
        alert('两次输入的密码不一致');
        return;
      }
      fetch('/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, password })
      })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          alert('注册成功！请记住你的用户id：' + data.userid);
          window.location.href = '/main'; // 注册成功后跳转到主页面
        } else {
          alert('注册失败，用户名已存在');
        }
      });
    }
</script>
</body>
</html>
